<template>
    <div :id="`checkcitybox-${name}`" :ref="`checkcitybox-${name}`" :class="['checkcity', {'checkcityclick': show}]" @click="checkme" style="width:200px">
        <span class="checkcity-value" v-if="valuelist[0]">{{city}}</span>
        <span class="checkcity-placeholder" v-else>请选择省、市、区</span>
        <Icon v-if="valuelist[0]" class="close" type="ios-arrow-down"  @click.stop @click="close"/>
        <Icon v-else type="ios-arrow-down"/>
        <div :ref="`checkcity-${name}`" :style="style">
            <div class="checkcity-fixed" v-if="show" @click="show=false"></div>
            <div class="checkcity-con" @click.stop v-if="show">
                <Tabs v-model="citys" name="city" :animated="false">
                    <TabPane label="省" name="province" tab="city">
                        <jgoptioncity type="province" :value="valuelist" @checkoption="checkoptionprovince"/>
                    </TabPane>
                    <TabPane label="市" name="city" :disabled="!valuelist[1]" tab="city">
                        <jgoptioncity  type="city" :value="valuelist" @checkoption="checkoptioncity"/>
                    </TabPane>
                    <TabPane label="区县" name="county" :disabled="!valuelist[2]" tab="city">
                        <jgoptioncity type="county" :value="valuelist" @checkoption="checkoptioncounty"/>
                    </TabPane>
                </Tabs>
            </div>
        </div>
    </div>
</template>
<script>
    import { commonprovincelist } from "@/api/hqapi/city";
    import jgoptioncity from './optioncity'
    export default {
        components: {jgoptioncity},
        props: {
            value: {
                type: [Array,String],
                default: function () {
                    return []
                }
            },
            name: {
                type: [String],
                default: ''
            }
        },
        data() {
            return {
                show: false,
                citys: 'province',
                Select: '',
                valuelist: [],
                values: [],
                datas: [],
                style: {},
                check: false,
                changevalues: false
            }
        },
        watch: {
            value(newVal,oldVal) {
                this.changevalues = false
                if(Object.prototype.toString.call(newVal) === '[object Array]'){
                    if (!newVal[0]) this.valuelist = []
                    else if (!newVal[1]) this.valuelist = [newVal[0], '' ,'']
                    else if (!newVal[2]) this.valuelist = [newVal[0], newVal[1] ,'']
                    else this.valuelist = newVal
                }
                if(Object.prototype.toString.call(newVal) === '[object String]'){
                    let values = newVal.split(',')
                    if (!values[0]) this.valuelist = []
                    else if (!values[1]) this.valuelist = [values[0], '' ,'']
                    else if (!values[2]) this.valuelist = [values[0], values[1] ,'']
                    else this.valuelist = values
                }
            },
            values(newVal,oldVal) {
                this.changevalues = false
                if(Object.prototype.toString.call(newVal) === '[object Array]'){
                    if (!newVal[0]) this.valuelist = []
                    else if (!newVal[1]) this.valuelist = [newVal[0], '' ,'']
                    else if (!newVal[2]) this.valuelist = [newVal[0], newVal[1] ,'']
                    else this.valuelist = newVal
                }
                if(Object.prototype.toString.call(newVal) === '[object String]'){
                    let values = newVal.split(',')
                    if (!values[0]) this.valuelist = []
                    else if (!values[1]) this.valuelist = [values[0], '' ,'']
                    else if (!values[2]) this.valuelist = [values[0], values[1] ,'']
                    else this.valuelist = values
                }
            },
        },
        computed: {
            city() {
                let citys = ''
                if (this.valuelist[0]) {
                    this.datas.forEach(province=>{
                        if (+province.value == +this.valuelist[0]) {
                            citys += province.label
                            this.citys = 'city'
                            if (this.valuelist[1]) {
                                province.children.forEach(city=>{
                                    if (+city.value == +this.valuelist[1]) {
                                        citys += `/${city.label}`
                                        this.citys = 'county'
                                        if (this.valuelist[2]) {
                                            city.children.forEach(county=>{
                                                if (+county.value == +this.valuelist[2]) {
                                                    citys += `/${county.label}`
                                                    return citys
                                                }
                                            })
                                        }
                                    }
                                })
                            }
                        }
                    })
                }
                return citys
            }
        },
        mounted() {
            let citytime = this.storage.get('citytime')
            if (citytime) {
                if (this.$Date(this.$Date()).diff(citytime,'day')>30) {
                    this.askData()
                } else {
                    this.datas = this.storage.get('cityarray')
                }
            } else {
                this.askData()
            }
            if(Object.prototype.toString.call(this.value) === '[object Array]'){
                this.valuelist = this.value
                if (!this.value[0]) this.valuelist = []
                else if (!this.value[1]) this.valuelist = [this.value[0], '' ,'']
                else if (!this.value[2]) this.valuelist = [this.value[0], this.value[1] ,'']
                else this.valuelist = this.value
            }
            if(Object.prototype.toString.call(this.value) === '[object String]'){
                let values = this.value.split(',')
                if (!values[0]) this.valuelist = []
                else if (!values[1]) this.valuelist = [values[0], '' ,'']
                else if (!values[2]) this.valuelist = [values[0], values[1] ,'']
                else this.valuelist = values
            }
        },
        methods: {
            changevalue(value) {
                this.values = value
                this.changevalues = true
            },
            checkme() {
                if (this.changevalues) {
                    if(Object.prototype.toString.call(this.values) === '[object Array]'){
                        if (!this.values[0]) this.valuelist = []
                        else if (!this.values[1]) this.valuelist = [this.values[0], '' ,'']
                        else if (!this.values[2]) this.valuelist = [this.values[0], this.values[1] ,'']
                        else this.valuelist = this.values
                    }
                    if(Object.prototype.toString.call(this.values) === '[object String]'){
                        let values = this.values.split(',')
                        if (!values[0]) this.valuelist = []
                        else if (!values[1]) this.valuelist = [values[0], '' ,'']
                        else if (!values[2]) this.valuelist = [values[0], values[1] ,'']
                        else this.valuelist = values
                    }
                } else {
                    if(Object.prototype.toString.call(this.value) === '[object Array]'){
                        if (!this.value[0]) this.valuelist = []
                        else if (!this.value[1]) this.valuelist = [this.value[0], '' ,'']
                        else if (!this.value[2]) this.valuelist = [this.value[0], this.value[1] ,'']
                        else this.valuelist = this.value
                    }
                    if(Object.prototype.toString.call(this.value) === '[object String]'){
                        let values = this.value.split(',')
                        if (!values[0]) this.valuelist = []
                        else if (!values[1]) this.valuelist = [values[0], '' ,'']
                        else if (!values[2]) this.valuelist = [values[0], values[1] ,'']
                        else this.valuelist = values
                    }
                }
                if (!this.valuelist[0]) this.citys = 'province'
                else if (!this.valuelist[1]) this.citys = 'city'
                else this.citys = 'county'
                this.show = true
                // this.citys = 'province'
                this.$nextTick(() => {
                    this.check = true
                    const body = document.querySelector("body");
                    let checkcity = this.$refs[`checkcity-${this.name}`]
                    if (body.append) {
                        body.append(checkcity);
                    } else {
                        body.appendChild(checkcity);
                    }
                    this.style = { top: 0, bottom: 0,position: "absolute"}
                    let width = document.body.clientWidth //1350
                    let height = document.body.clientHeight //937
                    var box = this.$refs[ `checkcitybox-${this.name}`].getClientRects()
                    if (height - box[0].bottom < 454 && width - box[0].left < 400) {
                        this.style = {left: `${box[0].left-200}px`,top: `${box[0].top - 464}px`, position: "absolute"}
                    } else if (height - box[0].bottom < 454) {
                        this.style = {left: `${box[0].left}px`,top: `${box[0].top - 464}px`, position: "absolute"}
                    } else if (width - box[0].left < 400) {
                        this.style = {left: `${box[0].left-200}px`,top: `${box[0].top+30}px`, position: "absolute"}
                    } else {
                        this.style = {left: `${box[0].left}px`,top: `${box[0].top+30}px`, position: "absolute"}
                    }
                });
            },
            close() {
                this.valuelist = []
                this.citys = 'province'
                this.$emit('cityvalue', [])
            },
            askData() {
                commonprovincelist().then(res=>{
                    this.storage.set('citytime',this.$Date().format('YYYY-MM-DD'))
                    this.storage.set('cityarray',res.data)
                })
            },
            checkoptionprovince(value) {
                if (value) {
                    this.$set(this.valuelist, 0, value)
                    this.$emit('cityvalue', [this.valuelist[0]])
                } else {
                    this.$set(this.valuelist, 0, '')
                    this.$set(this.valuelist, 1, '')
                    this.$set(this.valuelist, 2, '')
                    this.$emit('cityvalue', [])
                }
            },
            checkoptioncity(value) {
                if (value) {
                    this.$set(this.valuelist, 1, value)
                    this.$emit('cityvalue', [this.valuelist[0],this.valuelist[1]])
                } else {
                    this.$set(this.valuelist, 1, '')
                    this.$set(this.valuelist, 2, '')
                    this.$emit('cityvalue', [this.valuelist[0]])
                }
            },
            checkoptioncounty(value) {
                if (value) {
                    this.$set(this.valuelist, 2, value)
                    this.$emit('cityvalue', [this.valuelist[0],this.valuelist[1],this.valuelist[2]])
                    this.show = false
                } else {
                    this.$set(this.valuelist, 2, '')
                    this.$emit('cityvalue', [this.valuelist[0],this.valuelist[1]])
                }
            },
        }
    }
</script>
<style lang="less" scoped>
.checkcityclick {
    .ivu-icon {
        transform: translateY(-50%) rotate(180deg)!important;
        display: inline-block;
    }
}
.checkcity {
    height: 32px;
    position: relative;
    display: block;
    box-sizing: border-box;
    outline: none;
    user-select: none;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdee2;
    transition: all 0.2s ease-in-out;
    &-placeholder {
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 8px;
        padding-right: 24px;
        color: #999;
    }
    &-value{
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 8px;
        padding-right: 24px;
    }
    &-fixed{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 10000;
    }
    &-con{
        position: absolute;
        width: 400px;
        background-color: #fff;
        z-index: 10001;
        margin: 5px 0;
        height: 454px;
        padding: 16px;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    }
    &-cons{
        position: absolute;
        padding: 16px;
        width: 400px;
        background-color: #fff;
        z-index: 10001;
        margin: 5px 0;
        height: 454px;
        padding: 16px;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    }
    .close:hover{
        &:before{
            content: '\f177'
        }
    }
    .ivu-icon-ios-arrow-down {
        position: absolute;
        top: 50%;
        right: 8px;
        line-height: 1;
        transform: translateY(-50%);
        font-size: 14px;
        color: #808695;
        transition: all 0.2s ease-in-out;
    }
}
</style>
